import React, { Component } from 'react';
import { Modal, notification, Row, Col, Table, message } from 'antd';
import axios from 'axios';
import RelationTree from './RelationTree/index.jsx';
import { connect } from 'react-redux';
import store from '../../../redux/index';

const columns = [{
  title: '资源编码',
  dataIndex: 'code',
  key: 'code'
}, {
  title: '资源类型',
  dataIndex: 'type',
  key: 'type'
}, {
  title: '资源名称',
  dataIndex: 'name',
  key: 'name'
}, {
  title: '资源地址',
  dataIndex: 'uri',
  key: 'uri'
}, {
  title: '资源请求类型',
  dataIndex: 'method',
  key: 'method'
}];


class JurisdictionFrom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      intData: '',
      data: [],
      dataChecked: [],
      groupID: '',
      tableUpdate: '',
      menuId: ''
    };
  }
  // 提示框
    openNotification = (type, Message, Description) => {
      notification[type]({
        message: Message,
        description: Description
      });
    };
    // 右侧菜单表格数据
    getTableData = (ID, menuId) => {
      const _this = this;
      const Token = sessionStorage.getItem('token');
      _this.state.dataChecked = [];
      this.getTableChecked(menuId);
      axios({
        method: 'get',
        url: '/api/admin/element/list?menuId=' + ID,
        headers: {
          Authorization: Token
        },
      })
        .then(function (response) {
          let data = [];
          response.data.data.rows.forEach((item, i) => {
            data.push(item);
          });

          _this.setState({
            data: data,
            id: ID,
            menuId: menuId
          });
        })
        .catch(function (error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }
    //  获取右侧菜单表格数据checked选项
    getTableChecked = (ID) => {
      const _this = this;
      const Token = sessionStorage.getItem('token');
      axios({
        method: 'get',
        url: '/api/admin/group/' + ID + '/authority/element',
        headers: {
          Authorization: Token
        },
      })
        .then(function (response) {
          let oCheckedData = [];
          response.data.data.forEach((item, key) => {
            oCheckedData.push(item);
          });

          _this.setState({
            dataChecked: oCheckedData,
            groupID: ID
          });
        })
        .catch(function (error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }
    // 添加表格资源选项
    addResources = (ID, menuId) => {
      // console.log(ID+"----"+menuId);
      let oMenuId = Number(menuId);
      const _this = this;
      const Token = sessionStorage.getItem('token');
      axios({
        method: 'post',
        url: '/api/admin/group/' + this.state.groupID + '/authority/element/add?menuId=' + oMenuId + '&elementId=' + ID,
        headers: {
          Authorization: Token
        },
      })
        .then(function (response) {
        //    console.log(response);
          _this.openNotification('success', '成功', '关联成功');
        })
        .catch(function (error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }
    // 删除表格资源选项
    RomoveResources = (ID, menuId) => {
      // console.log(ID+"----"+menuId);
      let oMenuId = Number(menuId);
      const Token = sessionStorage.getItem('token');
      const _this = this;
      axios({
        method: 'post',
        url: '/api/admin/group/' + this.state.groupID + '/authority/element/remove?menuId=' + oMenuId + '&elementId=' + ID,
        headers: {
          Authorization: Token
        },
      })
        .then(function (response) {
          _this.openNotification('warning', '成功', '取消关联成功');
        })
        .catch(function (error) {
          console.log(error);
          message.error('服务器开小差啦，请重试！');
        });
    }

    componentWillReceiveProps(nextProps) {
      if (this.state.id == nextProps.ID) {
        return false;
      } else {
        if (nextProps.tableUpdate) {
          this.state.id = nextProps.ID;

          if (store.getState().getGroup.checkedOff == 'false') {
            this.getTableData(nextProps.oData.Num, '-1');
          }
          // console.log("菜单更新第二次------");
        }
      }

    }

    render() {
      const { visible, onCancel, onSave, form, NumId } = this.props;

      const rowSelection = {
        type: 'checkbox',
        selectedRowKeys: this.state.dataChecked,
        onChange: (selectedRowKeys, selectedRows) => {
          // console.log(selectedRowKeys)
          this.setState({
            dataChecked: selectedRowKeys
          });
          // this.addResources()
          //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

        },
        onSelect: (record, selected, selectedRows) => {
          console.log(record, selected);
          if (selected) {
            this.addResources(record.id, record.menuId);
          } else {
            this.RomoveResources(record.id, record.menuId);
          }

          // addCheked(selectedRows)
        },
        getCheckboxProps: (record) => (
          {
            // checked: record.id == this.state.dataChecked, // Column configuration not to be checked
            name: record.name,
          }
        ),
        // onSelectAll: (selected, selectedRows, changeRows) => {
        //     console.log(selected, selectedRows)
        // },
      };
      return (
        <Modal
          width="80%"
          visible={visible}
          title="关联资源"
          okText="保存"
          cancelText="取消"
          onCancel={onCancel}
          onOk={onSave.bind(this, this)}
          openNotification={this.openNotification}
        >
          <Row>
            <Col span={4}>
              <RelationTree getTableData={this.getTableData} />
            </Col>
            <Col span={19} offset={1}>
              <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.data} rowKey="id" bordered />
            </Col>
          </Row>
        </Modal>
      );
    }

}

export default connect((state) => {
  return { ...state };
})(JurisdictionFrom);
